<template>
  <div ref="wave" style="width: 100%; height: 100vh" class="search">
    <div class="content">
      <div class="search-input">
        <el-input
          placeholder="请输入关键词"
          class="input-with-select"
          v-model="keywords"
        >
        </el-input>
        <el-button
          type="primary"
          icon="el-icon-search"
          class="search-input-btn"
          v-on:click="searchKeyword"
          >搜索</el-button
        >
      </div>
      <div class="search-login" v-on:click="toLogin">
        <p>管理员登录</p>
      </div>
    </div>
  </div>
</template>

<script>
import * as THREE from 'three'
import WAVES from 'vanta/src/vanta.WAVES'

export default {
  name: 'Search',
  data () {
    return {
      keywords: '' // 搜索关键词
    }
  },
  methods: {
    searchKeyword () {
      let keywords = this.keywords
      console.log(keywords)
      this.$router.push({ name: 'Home', query: { keywords: keywords } })
    },
    toLogin () {
      this.$router.push('/login')
    }
  },
  mounted () {
    this.vantaEffect = WAVES({
      el: this.$refs.wave,
      THREE: THREE
    })
    // 这里重新设置样式
    this.vantaEffect.setOptions({
      mouseControls: true,
      touchControls: true,
      gyroControls: false,
      minHeight: 200.00,
      minWidth: 200.00,
      scale: 1.00,
      scaleMobile: 1.00
    })
  },
  beforeDestroy () {
    if (this.vantaEffect) {
      this.vantaEffect.destroy()
    }
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.content {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.search-input {
  margin: 0 auto;
  overflow: hidden;
  width: 40%;
  height: 10vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.search-input /deep/ .el-input__inner {
  border-radius: 5vh;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border: 0;
  box-shadow: 0 0 0 0px;
  font-size: 20px;
  height: 10vh;
  padding: 0 25px;
}

.search-input-btn {
  background-color: #215496 !important;
  color: white !important;
  border-radius: 5vh;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border: 0;
  background: rgba(0, 0, 0, 0);
  height: 10vh;
}

.search-login {
  margin-top: 5px;
  margin-left: 27%;

  color: #ffffff;

  cursor: pointer;
}
</style>
